<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body,ul,li,dl,dt,dd,p{margin: 0;padding: 0;}
        li{list-style: none;}
        a{text-decoration: none;color: #000;}
        #header{
            background-color: #333;
            height: 50px;
            color: #ccc;
            display: flex;
            padding: 0 20px;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
        }
        #footer{
            height: 400px;
            background-color: #eee;
            border-top: solid 1px #ccc;
        }
    </style>
</head>
<body>
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>
</body>
<script src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
<script>
    $("#body").load("home/body.html");
    $("#header").load("public/header.html");
    $("#footer").load("public/footer.html");
</script>
</html>